<template>
  <div class="app-page">
    <aside-tree
      title="组织机构"
      :tree-data="treeData"
      :loading="$loadingPlugin.getTreeData"
      :mouse-button="false"
      @currentChange="currentChange"
      @refresh="getTreeData"
    />
    <div class="content">
      <!-- <p>当前选择机构名称: {{ currentOrg ? currentOrg.orgName : '' }}</p>
      <p>当前选择机构orgSNNo: {{ currentOrg ? currentOrg.orgSNNo : '' }}</p> -->
      <el-table-form ref="dataForm" class="form" :model="query" label-position="right" label-width="80px">
        <el-form-item :table-form-merge="1.5" style="width: 100%;" label-width="0" class="merge-item">
          <el-select v-model="query.csmType">
            <el-option label="电话" value="csmRgPhone" />
            <el-option label="客户编号" value="csmCode" />
            <el-option label="客户名称" value="csmName" />
            <el-option label="地址" value="csmRgAddress" />
          </el-select>
          <el-input v-model.trim="query.csmText" style="width: 150%;" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item style="width: 100%;" label="客户等级" prop="unCheckQuality" class="merge-item">
          <el-select v-model="query.unCheckQuality" clearable placeholder="请选择">
            <el-option v-for="(l,i) in CmsLevelEnum" :key="i" :label="l.levelName" :value="l.levelNum" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 100%;" label="状态" prop="qualityStatus" class="merge-item">
          <el-select v-model="query.qualityStatus" placeholder="请选择">
            <el-option label="待审核" :value="1" />
            <el-option label="已审核" :value="2" />
          </el-select>
        </el-form-item>
        <template v-slot:btns>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </template>
      </el-table-form>
      <div style="margin-bottom: 10px;" class="btn-group">
        <div>
          <!-- <el-button type="primary" class="append-search" @click="search">查询</el-button> -->
          <el-button type="primary" class="append-search" @click="edit">编辑</el-button>
        </div>
      </div>
      <lb-table
        ref="lbTable"
        v-el-height-adaptive-table="{bottomOffset:10}"
        border
        resizable
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
        custom-column
        @selection-change="handleSelectionChange"
        @fetch="fetchData"
      />

    </div>
    <edit ref="edit" :cms-level-enum="CmsLevelEnum" :fetch-data="fetchData" />
    <CsmDetailModal ref="CsmDetailModal" />
    <CsmDetailYaJin ref="CsmDetailYaJin" />
  </div>
</template>
<script>
  import { organizationQueryList, queryCustomerLevelEquityPage, csmManageQueryList, queryCsmTypeMap, queryCustomerLevelAudit, customerInfo } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import asideTree from '@/views/components/OrgTree'
  import edit from './edit.vue'
  import CsmDetailModal from '@/views/components/CsmDetailModal'
  import CsmDetailYaJin from '@/views/components/NormalReceiptsAdd'
  export default {
    name: 'gradeAdmin',
    components: {
      asideTree, edit, CsmDetailModal, CsmDetailYaJin
    },
    data() {
      return {
        treeData: [],
        CmsLevelEnum: [], // 客户等级枚举
        currentOrg: null,
        csmTypeEnum: [],
        tableChecklist: [],
        query: {
          csmType: 'csmRgPhone'
        },
        tableData: {
          total: 0,
          column: [
            { type: 'selection' },
            { label: '客户编号', prop: 'csmCode', width: 80, align: 'center', showOverflowTooltip: true },
            { label: '客户名称', prop: 'csmName', width: 120, align: 'center', showOverflowTooltip: true },
            { label: '客户类型', prop: 'csmType', width: 80, align: 'center', showOverflowTooltip: true,
              render: (h, { row }) => <span>{ this.csmTypeEnum.find(l => l.value === row.csmType) ? this.csmTypeEnum.find(l => l.value === row.csmType).desc : '' }</span>
            },
            { label: '客户等级', prop: 'csmQuality', width: 140, showOverflowTooltip: true, align: 'center',
              // render: (h, { row }) => <span>{ this.CmsLevelEnum.find(l => l.levelNum === row.csmQuality) ? this.CmsLevelEnum.find(l => l.levelNum === row.csmQuality).levelName : '->二级会员' }</span>
              render: (h, { row, column }) => <span>{ this.getLevel(row, column) }</span>
            },
            { label: '电话', prop: 'csmRgPhone', width: 120, showOverflowTooltip: true, align: 'center' },
            { label: '地址', prop: 'csmRgAddress', width: '', showOverflowTooltip: true, align: 'center' },
            { label: '所属机构', prop: 'nearStationName', showOverflowTooltip: true, width: 160, align: 'center' },
            { label: '状态', prop: 'qualityStatus', showOverflowTooltip: true, width: 80, align: 'center',
              render: (h, { row }) => <span>{ row.qualityStatus === 1 ? '待审核' : row.qualityStatus === 2 ? '已审核' : '' }</span>
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' onClick={() => this.audit(row, $index)}>
                      {row.qualityStatus === 1 ? '审核' : ''}
                    </el-link>
                    <el-link size='mini' onClick={() => this.binding(row)}>
                      绑定钢瓶
                    </el-link>
                    <el-link size='mini' onClick={() => this.historyDetail(row, $index)}>
                      历史详情
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
      this.getTreeData()
      this.getCmsLevelEnum()
      this.getcsmTypeEnum()
    },
    mounted() {

    },
    methods: {
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        var query = {
          currentPage,
          pageSize,
          orgSNNo: this.currentOrg ? this.currentOrg.orgSNNo : '',
          ...this.query
        }
        query[this.query.csmType] = this.query.csmText
        delete query.csmText
        delete query.csmType
        console.log(query)
        const res = await csmManageQueryList(query)
        this.tableData.data = res.data.rows

        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 客户类型枚举
      async getcsmTypeEnum() {
        try {
          const res = await queryCsmTypeMap()
          this.csmTypeEnum = res.data
        } catch (e) {
          console.log(e)
        }
      },
      // 获取客户等级枚举
      async getCmsLevelEnum() {
        try {
          const params = {
            'keyStatus': -1,
            pageIndex: 0,
            pageSize: 100
          }
          const res = await queryCustomerLevelEquityPage(params)
          this.CmsLevelEnum = res.data.rows
          console.log(res)
        } catch (e) {
          console.log(e)
        }
      },
      // 获取组织机构数据
      async getTreeData() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择组织机构变化
      currentChange(current) {
        this.fetchData({})
        this.currentOrg = current
        console.log(current)
      },
      getLevel(row, column) {
        var qualityStatus = row.qualityStatus
        // console.log(qualityStatus)
        // this.CmsLevelEnum.find(l => l.levelNum === row.csmQuality).levelName
        if (qualityStatus === 2) { // 说明是已审核数据
          var unCheckQuality = row.unCheckQuality
          for (var x = 0; x < this.CmsLevelEnum.length; x++) {
            if (unCheckQuality === this.CmsLevelEnum[x].levelNum) {
              return this.CmsLevelEnum[x].levelName
            }
          }
        } else if (qualityStatus === 1) { // 说明是待审核
          var csmQuality = row.csmQuality // 原等级
          unCheckQuality = row.unCheckQuality // 新等级
          var csmQualityValue = ''
          var unCheckQualityValue = ''
          for (x = 0; x < this.CmsLevelEnum.length; x++) {
            // 原等级名称
            if (csmQuality === this.CmsLevelEnum[x].levelNum) {
              csmQualityValue = this.CmsLevelEnum[x].levelName
            }
            // 修改后等级名称
            if (unCheckQuality === this.CmsLevelEnum[x].levelNum) {
              unCheckQualityValue = this.CmsLevelEnum[x].levelName
            }
          }
          return csmQualityValue + '->' + unCheckQualityValue
        }

        return ''
      },
      // table选择
      handleSelectionChange(val) {
        this.tableChecklist = val
        console.log(val)
      },
      // 搜索
      search() {
        this.fetchData({})
      },
      // 编辑
      edit() {
        var list = this.tableChecklist.map(l => { return { csmCode: l.csmCode, csmQuality: l.csmQuality } })
        if (list && list.length) {
          this.$refs.edit.open(list)
        } else {
          this.$message.warning('请至少选择一个进行调整')
        }
      },
      // 绑定钢瓶
      async binding(row) {
        const res = await customerInfo({ csmCode: row.csmCode })
        console.log(res, 'res')
        await this.$refs.CsmDetailYaJin.open(res.data, 'add')
        // this.$refs.CsmDetailYaJin.open(row)
      },
      // 历史详情
      historyDetail(row) {
        this.$refs.CsmDetailModal.open(row)
      },
      // 审核
      async audit(row) {
        try {
          const res = await queryCustomerLevelAudit({ csmCodes: row.csmCode })
          if (res.success) {
            this.fetchData({})
          }
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    flex: 1;
    // width: 0;
    padding: 10px 10px 0 10px;
  }
}
.form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 30%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}

</style>
